React useFormState Validatsiya Konveyeri: Ko'p bosqichli Formalarni Tekshirishni Mukammal O'zlashtirish

Mustahkam validatsiyaga ega murakkab formalarni yaratish zamonaviy veb-ishlab chiqishda keng tarqalgan muammo hisoblanadi. React'ning useFormState hook'i forma holati va validatsiyasini boshqarishning kuchli va moslashuvchan usulini taklif etadi, bu esa murakkab ko'p bosqichli validatsiya konveyerlarini yaratishga imkon beradi. Ushbu keng qamrovli qo'llanma sizni asoslarni tushunishdan tortib, ilg'or asinxron validatsiya strategiyalarini amalga oshirishgacha bo'lgan jarayon bilan tanishtiradi.

Nima uchun Ko'p Bosqichli Forma Validatsiyasi Kerak?

An'anaviy, bir bosqichli forma validatsiyasi, ayniqsa ko'p sonli maydonlar yoki murakkab bog'liqliklarga ega formalar bilan ishlaganda, noqulay va samarasiz bo'lib qolishi mumkin. Ko'p bosqichli validatsiya sizga quyidagilarga imkon beradi:

• Foydalanuvchi Tajribasini Yaxshilash: Muayyan forma bo'limlari bo'yicha darhol fikr-mulohaza berib, foydalanuvchilarni to'ldirish jarayonida samaraliroq yo'naltirish.
• Ishlash Samaradorligini Oshirish: Butun forma bo'yicha keraksiz validatsiya tekshiruvlaridan qochish, ayniqsa katta formalar uchun ishlash samaradorligini optimallashtirish.
• Kodning Qo'llab-quvvatlanuvchanligini Oshirish: Validatsiya mantiqini kichikroq, boshqariladigan birliklarga bo'lish, bu kodni tushunish, sinovdan o'tkazish va qo'llab-quvvatlashni osonlashtiradi.

useFormState'ni Tushunish

useFormState hook'i (ko'pincha react-use kabi kutubxonalarda yoki maxsus implementatsiyalarda mavjud) forma holatini, validatsiya xatolarini va yuborishni boshqarish usulini taqdim etadi. Uning asosiy funksionalligi quyidagilarni o'z ichiga oladi:

• Holatni Boshqarish: Forma maydonlarining joriy qiymatlarini saqlaydi.
• Validatsiya: Forma qiymatlariga nisbatan validatsiya qoidalarini bajaradi.
• Xatolarni Kuzatish: Har bir maydon bilan bog'liq validatsiya xatolarini kuzatib boradi.
• Yuborishni Boshqarish: Formani yuborish va yuborish natijasini qayta ishlash uchun mexanizmlarni taqdim etadi.

Asosiy Validatsiya Konveyerini Yaratish

Keling, ikki bosqichli formaning oddiy misolidan boshlaymiz: shaxsiy ma'lumotlar (ism, email) va manzil ma'lumotlari (ko'cha, shahar, mamlakat).

1-qadam: Forma Holatini Aniqlash

Birinchi navbatda, biz formamizning barcha maydonlarini o'z ichiga olgan boshlang'ich holatini aniqlaymiz:

const initialFormState = {
  firstName: '',
  lastName: '',
  email: '',
  street: '',
  city: '',
  country: '',
};

2-qadam: Validatsiya Qoidalarini Yaratish

Keyinchalik, biz validatsiya qoidalarimizni aniqlaymiz. Ushbu misol uchun, barcha maydonlar bo'sh bo'lmasligini talab qilamiz va emailning to'g'ri formatda ekanligiga ishonch hosil qilamiz.

const validateField = (fieldName, value) => {
  if (!value) {
    return 'Bu maydon toʻldirilishi shart.';
  }

  if (fieldName === 'email' && !/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/.test(value)) {
    return 'Email formati notoʻgʻri.';
  }

  return null; // Xato yo'q
};

3-qadam: useFormState Hook'ini Amalga Oshirish

Endi, (taxminiy) useFormState hook'idan foydalanib, validatsiya qoidalarini React komponentimizga integratsiya qilamiz:

import React, { useState } from 'react';

// Maxsus implementatsiya yoki react-use kabi kutubxonani nazarda tutamiz
const useFormState = (initialState) => {
  const [values, setValues] = useState(initialState);
  const [errors, setErrors] = useState({});

  const handleChange = (event) => {
    const { name, value } = event.target;
    setValues({ ...values, [name]: value });

    // Yaxshiroq UX uchun o'zgarishda tekshirish (ixtiyoriy)
    setErrors({ ...errors, [name]: validateField(name, value) });
  };

  const validateFormStage = (fields) => {
    const newErrors = {};
    let isValid = true;
    fields.forEach(field => {
      const error = validateField(field, values[field]);
      if (error) {
        newErrors[field] = error;
        isValid = false;
      }
    });
    setErrors({...errors, ...newErrors}); // Mavjud xatolar bilan birlashtirish
    return isValid;
  };

  const clearErrors = (fields) => {
    const newErrors = {...errors};
    fields.forEach(field => delete newErrors[field]);
    setErrors(newErrors);
  };

  return {
    values,
    errors,
    handleChange,
    validateFormStage,
    clearErrors,
  };
};


const MyForm = () => {
  const { values, errors, handleChange, validateFormStage, clearErrors } = useFormState(initialFormState);
  const [currentStage, setCurrentStage] = useState(1);

  const handleNextStage = () => {
    let isValid;
    if (currentStage === 1) {
        isValid = validateFormStage(['firstName', 'lastName', 'email']);
    } else {
        isValid = validateFormStage(['street', 'city', 'country']);
    }

    if (isValid) {
      setCurrentStage(currentStage + 1);
    }
  };

  const handlePreviousStage = () => {
    if(currentStage > 1){
      if(currentStage === 2){
        clearErrors(['firstName', 'lastName', 'email']);
      } else {
        clearErrors(['street', 'city', 'country']);
      }
      setCurrentStage(currentStage - 1);
    }
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    const isValid = validateFormStage(['firstName', 'lastName', 'email', 'street', 'city', 'country']);
    if (isValid) {
      // Formani yuborish
      console.log('Forma yuborildi:', values);
      alert('Forma yuborildi!'); //Haqiqiy yuborish mantiqi bilan almashtiring
    } else {
      console.log('Formada xatolar mavjud, iltimos ularni toʻgʻrilang.');
    }
  };

  return (
    

      {currentStage === 1 && (
        

          
Shaxsiy ma'lumotlar
          
            Ism:
            
            {errors.firstName && {errors.firstName}}
          
          

          
            Familiya:
            
            {errors.lastName && {errors.lastName}}
          
          

          
            Email:
            
            {errors.email && {errors.email}}
          
          

        
      )}

      {currentStage === 2 && (
        

          
Manzil ma'lumotlari
          
            Ko'cha:
            
            {errors.street && {errors.street}}
          
          

          
            Shahar:
            
            {errors.city && {errors.city}}
          
          

          
            Mamlakat:
            
            {errors.country && {errors.country}}
          
          

        
      )}

      

        {currentStage > 1 && Oldingi}
        {currentStage < 2 && Keyingi}
        {currentStage === 2 && Yuborish}
      
    
  );
};

export default MyForm;

4-qadam: Bosqichlararo Navigatsiyani Amalga Oshirish

Formaning joriy bosqichini boshqarish uchun holat o'zgaruvchilaridan foydalaning va joriy bosqichga qarab tegishli forma bo'limini ko'rsating.

Ilg'or Validatsiya Texnikalari

Asinxron Validatsiya

Ba'zan validatsiya server bilan o'zaro aloqani talab qiladi, masalan, foydalanuvchi nomining mavjudligini tekshirish. Bu asinxron validatsiyani talab qiladi. Uni qanday integratsiya qilish mumkinligi quyida keltirilgan:

const validateUsername = async (username) => {
  try {
    const response = await fetch(`/api/check-username?username=${username}`);
    const data = await response.json();
    if (data.available) {
      return null; // Foydalanuvchi nomi mavjud
    } else {
      return 'Bu foydalanuvchi nomi allaqachon olingan.';
    }
  } catch (error) {
    console.error('Foydalanuvchi nomini tekshirishda xatolik:', error);
    return 'Foydalanuvchi nomini tekshirishda xatolik. Iltimos, qayta urinib koʻring.'; // Tarmoq xatolarini to'g'ri qayta ishlang
  }
};

const useFormStateAsync = (initialState) => {
  const [values, setValues] = useState(initialState);
  const [errors, setErrors] = useState({});
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleChange = (event) => {
    const { name, value } = event.target;
    setValues({ ...values, [name]: value });
  };

  const validateFieldAsync = async (fieldName, value) => {
    if (fieldName === 'username') {
      return await validateUsername(value);
    }
    return validateField(fieldName, value);
  };


  const handleSubmit = async (event) => {
      event.preventDefault();
      setIsSubmitting(true);
      let newErrors = {};
      let isValid = true;

      for(const key in values){
        const error = await validateFieldAsync(key, values[key]);
        if(error){
          newErrors[key] = error;
          isValid = false;
        }
      }

      setErrors(newErrors);
      setIsSubmitting(false);

      if (isValid) {
        // Formani yuborish
        console.log('Forma yuborildi:', values);
        alert('Forma yuborildi!'); //Haqiqiy yuborish mantiqi bilan almashtiring
      } else {
        console.log('Formada xatolar mavjud, iltimos ularni toʻgʻrilang.');
      }
  };



  return {
    values,
    errors,
    handleChange,
    handleSubmit,
    isSubmitting //Ixtiyoriy: validatsiya paytida yuklanish xabarini ko'rsatish
  };
};

Ushbu misolda foydalanuvchi nomining mavjudligini tekshirish uchun API so'rovini amalga oshiradigan validateUsername funksiyasi mavjud. Potentsial tarmoq xatolarini to'g'ri qayta ishlashga va foydalanuvchiga tegishli fikr-mulohazalarni taqdim etishga ishonch hosil qiling.

Shartli Validatsiya

Ba'zi maydonlar faqat boshqa maydonlarning qiymatiga qarab validatsiyani talab qilishi mumkin. Masalan, "Kompaniya veb-sayti" maydoni faqat foydalanuvchi ish bilan band ekanligini ko'rsatsagina talab qilinishi mumkin. Validatsiya funksiyalaringiz ichida shartli validatsiyani amalga oshiring:

const validateFieldConditional = (fieldName, value, formValues) => {
  if (fieldName === 'companyWebsite' && formValues.employmentStatus === 'employed' && !value) {
    return 'Agar ishlasangiz, kompaniya veb-sayti talab qilinadi.';
  }
  return validateField(fieldName, value); // Asosiy validatsiyaga topshirish
};

Dinamik Validatsiya Qoidalari

Ba'zan validatsiya qoidalarining o'zi tashqi omillar yoki ma'lumotlarga qarab dinamik bo'lishi kerak. Bunga dinamik validatsiya qoidalarini validatsiya funksiyalaringizga argument sifatida uzatish orqali erishishingiz mumkin:

const validateFieldWithDynamicRules = (fieldName, value, rules) => {
  if (rules && rules[fieldName] && rules[fieldName].maxLength && value.length > rules[fieldName].maxLength) {
    return `Bu maydon ${rules[fieldName].maxLength} belgidan kam boʻlishi kerak.`;
  }
  return validateField(fieldName, value); // Asosiy validatsiyaga topshirish
};

Xatolarni Qayta Ishlash va Foydalanuvchi Tajribasi

Samarali xatolarni qayta ishlash ijobiy foydalanuvchi tajribasi uchun juda muhimdir. Quyidagilarni inobatga oling:

• Xatolarni Aniq Ko'rsatish: Xato xabarlarini tegishli kiritish maydonlari yonida joylashtiring. Aniq va lo'nda tildan foydalaning.
• Haqiqiy Vaqtdagi Validatsiya: Foydalanuvchi yozayotganda maydonlarni tekshiring, darhol fikr-mulohaza bering. Ishlash samaradorligiga e'tibor bering; agar kerak bo'lsa, validatsiya chaqiruvlarini debounce yoki throttle qiling.
• Xatolarga E'tiborni Qaratish: Yuborilgandan so'ng, foydalanuvchining e'tiborini xatosi bor birinchi maydonga qarating.
• Mavjudlik (Accessibility): ARIA atributlari va semantik HTML'dan foydalanib, xato xabarlarining nogironligi bo'lgan foydalanuvchilar uchun mavjudligini ta'minlang.
• Xalqarolashtirish (i18n): Xato xabarlarini foydalanuvchining afzal ko'rgan tilida ko'rsatish uchun to'g'ri xalqarolashtirishni amalga oshiring. i18next yoki mahalliy JavaScript Intl API kabi xizmatlar yordam berishi mumkin.

Ko'p Bosqichli Forma Validatsiyasi uchun Eng Yaxshi Amaliyotlar

• Validatsiya Qoidalarini Qisqa Tutish: Murakkab validatsiya mantiqini kichikroq, qayta ishlatiladigan funksiyalarga bo'ling.
• Puxta Sinovdan O'tkazish: Validatsiya qoidalaringizning aniqligi va ishonchliligini ta'minlash uchun birlik testlarini yozing.
• Validatsiya Kutubxonasidan Foydalanish: Jarayonni soddalashtirish va kod sifatini yaxshilash uchun maxsus validatsiya kutubxonasidan (masalan, Yup, Zod) foydalanishni o'ylab ko'ring. Bu kutubxonalar ko'pincha sxemaga asoslangan validatsiyani ta'minlaydi, bu murakkab validatsiya qoidalarini aniqlash va boshqarishni osonlashtiradi.
• Ishlash Samaradorligini Optimallashtirish: Ayniqsa, real vaqtdagi validatsiya paytida keraksiz tekshiruvlardan saqlaning. Validatsiya natijalarini keshlash uchun memoizatsiya usullaridan foydalaning.
• Aniq Ko'rsatmalar Berish: Aniq ko'rsatmalar va foydali maslahatlar bilan foydalanuvchilarni formani to'ldirish jarayonida yo'naltiring.
• Progressiv Ochib Berishni Ko'rib Chiqish: Har bir bosqich uchun faqat tegishli maydonlarni ko'rsating, bu formani soddalashtiradi va kognitiv yukni kamaytiradi.

Alternativ Kutubxonalar va Yondashuvlar

Ushbu qo'llanma maxsus useFormState hook'iga qaratilgan bo'lsa-da, ko'pincha qo'shimcha funksiyalar va ishlash optimizatsiyalari bilan shunga o'xshash funksionallikni ta'minlaydigan bir nechta ajoyib forma kutubxonalari mavjud. Ba'zi mashhur alternativlar quyidagilarni o'z ichiga oladi:

• Formik: React'da forma holati va validatsiyasini boshqarish uchun keng qo'llaniladigan kutubxona. U formani boshqarishga deklarativ yondashuvni taklif qiladi va turli validatsiya strategiyalarini qo'llab-quvvatlaydi.
• React Hook Form: Qayta renderlashni minimallashtirish uchun boshqarilmaydigan komponentlar va React'ning ref API'sidan foydalanadigan, ishlashga yo'naltirilgan kutubxona. U katta va murakkab formalar uchun a'lo darajadagi ishlashni ta'minlaydi.
• Final Form: Turli UI freymvorklari va validatsiya kutubxonalarini qo'llab-quvvatlaydigan ko'p qirrali kutubxona. U formaning xatti-harakatlarini sozlash uchun moslashuvchan va kengaytiriladigan API'ni taklif etadi.

To'g'ri kutubxonani tanlash sizning maxsus talablaringiz va afzalliklaringizga bog'liq. Qaror qabul qilishda ishlash samaradorligi, foydalanish qulayligi va funksiyalar to'plami kabi omillarni hisobga oling.

Xalqaro Jihatlar

Global auditoriya uchun formalar yaratishda xalqarolashtirish va lokalizatsiyani hisobga olish muhimdir. Mana ba'zi asosiy jihatlar:

• Sana va Vaqt Formatlari: Muvofiqlikni ta'minlash va chalkashliklarning oldini olish uchun mahalliy sana va vaqt formatlaridan foydalaning.
• Raqam Formatlari: Mahalliy raqam formatlaridan, jumladan valyuta belgilari va o'nlik ajratgichlardan foydalaning.
• Manzil Formatlari: Manzil maydonlarini turli mamlakat formatlariga moslashtiring. Ba'zi mamlakatlar shaharlardan oldin pochta indekslarini talab qilishi mumkin, boshqalarida esa pochta indekslari umuman bo'lmasligi mumkin.
• Telefon Raqamini Tekshirish: Xalqaro telefon raqamlari formatlarini qo'llab-quvvatlaydigan telefon raqamini tekshirish kutubxonasidan foydalaning.
• Belgilar Kodirovkasi: Formangiz turli belgilar to'plamlarini, jumladan Unicode va boshqa lotin bo'lmagan belgilarni to'g'ri qayta ishlashiga ishonch hosil qiling.
• O'ngdan Chapga (RTL) Maket: Arab va ibroniy kabi RTL tillarini qo'llab-quvvatlash uchun forma maketini mos ravishda moslashtiring.

Ushbu xalqaro jihatlarni hisobga olgan holda, siz global auditoriya uchun qulay va foydalanuvchilarga do'stona bo'lgan formalarni yaratishingiz mumkin.

Xulosa

React'ning useFormState hook'i (yoki alternativ kutubxonalar) yordamida ko'p bosqichli forma validatsiyasi konveyerini amalga oshirish foydalanuvchi tajribasini sezilarli darajada yaxshilashi, ishlash samaradorligini oshirishi va kodning qo'llab-quvvatlanuvchanligini oshirishi mumkin. Asosiy tushunchalarni tushunib, ushbu qo'llanmada keltirilgan eng yaxshi amaliyotlarni qo'llash orqali siz zamonaviy veb-ilovalarning talablariga javob beradigan mustahkam va kengaytiriladigan formalarni yaratishingiz mumkin.

Foydalanuvchi tajribasiga ustuvorlik berishni, puxta sinovdan o'tkazishni va validatsiya strategiyalaringizni loyihangizning o'ziga xos talablariga moslashtirishni unutmang. Ehtiyotkorlik bilan rejalashtirish va amalga oshirish orqali siz ham funksional, ham foydalanish uchun yoqimli bo'lgan formalarni yaratishingiz mumkin.

Qo'shimcha O'rganish Uchun

• React Rasmiy Hujjatlari
• Formik Hujjatlari
• React Hook Form Hujjatlari